<template>
  <div class="miniprogram-code" v-if="designerInfo && miniCodeUrl">
    <div id="qrcover">
      <img src="@/assets/images/bg.png" alt />
      <div class="info">
        <div class="name">{{designerInfo.name}}</div>
        <div class="phone">合作电话： {{designerInfo.company_tel ? designerInfo.company_tel : '暂无联系电话'}}</div>
        <div class="company">{{designerInfo.company_name}}</div>
      </div>
      <div class="code">
        <div class="img">
          <img :src="miniCodeUrl" alt />
        </div>
        <div class="txt">
          <p>长按小程序码</p>
          <p>了解真实有趣的设计师</p>
        </div>
      </div>
    </div>
    <div class="btn" @click="createImgCover" v-show="showBtn">生成图片</div>
    <van-overlay :show="show" @click="show = false; showBtn=true">
      <div class="wrapper" @click.stop>
        <div class="block">
          <img :src="imgUrl" alt />
          <div class="tip">长按保存图片</div>
        </div>
      </div>
    </van-overlay>
  </div>
</template>

<script>
import { getDesignerInfo, getMiniCode } from '@/api/my'
import html2canvas from 'html2canvas'
const ERR_OK = 200
export default {
  data () {
    return {
      designerInfo: null,
      show: false,
      showBtn: true,
      imgUrl: '',
      miniCodeUrl: ''
    }
  },
  created () {},
  mounted () {
    this._getDesignerInfo().then(res => {
      if (res.code === ERR_OK) {
        this._getMiniCode().then(res => {
          if (res.code === ERR_OK) {
            setTimeout(() => {
              this.createImgCover()
            }, 500)
          }
        })
      }
    })
  },
  methods: {
    createImgCover () {
      this.show = true
      this.showBtn = false
      this.initCreateDom()
    },
    _getDesignerInfo () {
      return getDesignerInfo().then(res => {
        if (res.code === ERR_OK) {
          this.designerInfo = res.data
          return Promise.resolve(res)
        }
      })
    },
    _getMiniCode () {
      return getMiniCode()
        .then(res => {
          if (res.code === ERR_OK) {
            console.log(res)
            this.miniCodeUrl = res.data.url
            return Promise.resolve(res)
          }
        })
        .catch(err => {
          console.log(err)
        })
    },
    initCreateDom () {
      window.pageYOffset = 0
      document.documentElement.scrollTop = 0
      document.body.scrollTop = 0

      this.$nextTick(() => {
        html2canvas(document.querySelector('#qrcover'), {
          useCORS: true
          // allowTaint: true, // 允许跨域图片
          // backgroundColor: null
        }).then(canvas => {
          // canvas
          this.imgUrl = canvas.toDataURL('image/jpeg')
        })
      })
    }
  }
}
</script>
<style lang="scss" scoped>
@import "@/styles/mixin.scss";
.miniprogram-code {
  position: fixed;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  z-index: 99;
  touch-action: none;

  #qrcover {
    width: 100%;
    height: 100%;
    & > img {
      width: 100%;
      height: 100%;
    }
  }
  .info {
    margin: 0 auto;
    position: absolute;
    top: 2.6rem;
    @include hCenter();
    text-align: center;
    .name {
      font-size: 0.6rem;
      font-family: Source Han Sans CN;
      font-weight: bold;
      color: #2f3f5a;
      margin-top: 0.2rem;
    }
    .phone {
      padding: 0.1rem 0.45rem;
      background: rgba(12, 10, 15, 1);
      font-size: 0.24rem;
      font-family: Source Han Sans CN;
      font-weight: 400;
      color: rgba(255, 255, 255, 1);
      margin-top: 0.26rem;
      white-space: nowrap;
    }
    .company {
      font-size: 0.32rem;
      font-family: Source Han Sans CN;
      font-weight: 500;
      color: rgba(12, 10, 15, 1);
      margin-top: 0.2rem;
    }
  }
  .code {
    position: absolute;
    bottom: 2.52rem;
    @include hCenter();
    text-align: center;
    .img {
      width: 2.15rem;
      height: 2.3rem;
      border-radius: 50%;
      overflow: hidden;
      margin: 0 auto;
      img {
        width: 100%;
      }
    }
    .txt {
      margin-top: 0.2rem;
      p {
        font-size: 0.28rem;
        font-family: PingFangSC;
        font-weight: 400;
        color: rgba(12, 10, 15, 1);
        line-height: 0.43rem;
        text-align: center;
      }
    }
  }
  .btn {
    padding-bottom: 0.01rem;
    border-bottom: 1px solid #2f3f5a;
    color: #2f3f5a;
    font-size: 0.24rem;
    text-align: center;
    position: absolute;
    @include hCenter();
    bottom: 1.5rem;
  }
  .van-overlay /deep/.tip {
    color: #c3c8d2;
    font-size: 0.24rem;
    text-align: center;
    margin-top: 0.15rem;
  }
  .van-overlay /deep/ .block {
    text-align: center;
    @include center();
    img {
      width: 6.1rem;
      height: 10.73rem;
    }
  }
}
</style>
